// pages/menu/menu.js
let heightArr = [0]; // 声明一个数组，起始项为0
let flag = true;  // 为true时代表可以滚动
Page({
  data: {
    background: [
      '/images/banner/menubanner1.jpg',
      '/images/banner/menubanner2.jpg',
      '/images/banner/menubanner3.jpg'
    ],
    // 假设有一个num
    num: 0,
    arr: [{
        "id": 0,
        "title": "人气Top",
        "subArr": [{
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "拿铁"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "桃桃芝士红宝石"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "咖啡风味安慕希"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "陨石拿铁"
          }
        ]
      },
      {
        "id": 1,
        "title": "大师咖啡",
        "subArr": [{
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "冲绳黑糖拿铁"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "陨石拿铁"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "拿铁"
          }
        ]
      },
      {
        "id": 2,
        "title": "小鹿茶精选",
        "subArr": [{
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "标准美式"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "加浓美式"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "焦糖标准美式"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "焦糖加浓拿铁"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "银河气泡美式"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "银河气泡美式"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "银河气泡美式"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "银河气泡美式"
          }
        ]
      },
      {
        "id": 3,
        "title": "瑞纳冰",
        "subArr": [{
          "imgSrc": "/images/menu/1-1.jpg",
          "imgDesc": "乐岛桃桃冰"
        }]
      },
      {
        "id": 4,
        "title": "鲜榨果蔬汁",
        "subArr": [{
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "NFC鲜榨橙汁"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "NFC鲜榨西柚汁"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "猕猴桃复合果汁"
          }
        ]
      },
      {
        "id": 5,
        "title": "经典饮品",
        "subArr": [{
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "巧克力"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "纯牛奶"
          }
        ]
      },
      {
        "id": 6,
        "title": "健康轻食",
        "subArr": [{
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "京味烤鸭鲜蔬卷"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "夏威夷菠萝火山卷"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "火腿芝士羊角"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "鸡肉卷"
          }
        ]
      }
    ],
    leftNum: 0,
    // 右侧id
    rightId: 'right0'
  },
  // 轮播图切换事件
  changeFn(e) {
    // 得到当前图片的索引值
    // console.log(e.detail.current);
    // 给num赋值
    this.setData({
      num: e.detail.current
    })
  },
  // 有点类似于mounted    beforeMount 和 mounted
  onReady() {
    setTimeout(() => {
      // 获取所有类名为content的盒子的高度
      const query = wx.createSelectorQuery()
      query.selectAll('.content').boundingClientRect()
      query.selectViewport().scrollOffset()
      query.exec(function (res) {
        // 提取这个数组中所有的高度，存放到另一个空白的数组中
        res[0].map(item => {
          // 将得到的高度累加上数组的最后一项
          let myheight = item.height + heightArr[heightArr.length - 1]
          heightArr.push(myheight); // 将累加出来的高度push到heightArr数组中
        })
      })
    }, 500)
  },
  // 左边的点击事件
  leftClick(e) {
    // setData(obj, callback)
    flag = false;
    this.setData({
      leftNum: e.target.dataset.myindex,
      rightId: 'right' + e.target.dataset.myindex
    }, ()=>{
      setTimeout(()=>{
        flag = true;
      }, 500)
    })
  },
  // 右侧滚动事件
  rightScroll(e) {
    setTimeout(()=>{
      // 先判断是否有flag，如果有flag再判断它是否为true
      if(flag){ 
        let st = e.detail.scrollTop;
        // 右侧滚动的目的是为了让左侧知道当前应该显示哪一项
        for (let i = 0; i < heightArr.length; i++) {
          // i 和 i+1 项之间    st判断    heightArr[i]<=st<heightArr[i+1]  数学
          if (st >= heightArr[i]-10 && st < heightArr[i + 1]) {
            console.log(i);
            // 决定左侧谁是当前项
            this.setData({
              leftNum: i
            })
          }
        }
      }
    }, 200)
  }
})